<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>输入式打字机效果</title>
    <style>
        /* 整体布局：输入区 + 输出区 */
        .container {
            width: 90%;
            max-width: 1000px;
            margin: 30px auto;
        }
        /* 输入区域 */
        .input-area {
            margin-bottom: 20px;
        }
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            line-height: 1.5;
            min-height: 80px;
            box-sizing: border-box;
        }
        button {
            margin-top: 10px;
            padding: 8px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        /* 输出区域（打字机效果） */
        .output-area {
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: "Courier New", 等宽字体;
            font-size: 16px;
            line-height: 1.6;
            white-space: pre-wrap;
            min-height: 200px;
        }
        /* 闪烁光标 */
        .cursor {
            display: inline-block;
            width: 8px;
            height: 20px;
            background: #000;
            margin-left: 2px;
            animation: blink 1s infinite;
        }
        @keyframes blink {
            0%,100% { opacity: 1; }
            50% { opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 输入区域：用户输入文案 -->
        <div class="input-area">
            <textarea id="inputText" placeholder="请输入要提交的文案..."></textarea>
            <button id="submitBtn">提交并生成打字机效果</button>
        </div>

        <!-- 输出区域：打字机效果展示 -->
        <div class="output-area" id="output"></div>
        <div class="cursor" id="cursor" style="display: none;"></div>
    </div>

    <script>
        // 配置：修改为你的本地接口基础地址（后端接口是 /stream/{text}）
        const LOCAL_API_BASE = "http://127.0.0.1:8811/api/chat/stream/";
        const TYPE_SPEED = 60; // 打字速度（毫秒/字符）

        // DOM元素
        const inputTextEl = document.getElementById('inputText');
        const submitBtn = document.getElementById('submitBtn');
        const outputEl = document.getElementById('output');
        const cursorEl = document.getElementById('cursor');
        let eventSource; // SSE连接实例

        // 提交按钮点击事件
        submitBtn.addEventListener('click', function() {
            const inputText = inputTextEl.value.trim();
            if (!inputText) {
                alert('请输入文案后再提交！');
                return;
            }

            // 准备提交：禁用按钮、清空之前的输出、显示光标
            submitBtn.disabled = true;
            outputEl.innerHTML = '';
            cursorEl.style.display = 'inline-block';

            // 拼接接口地址（对输入文本编码，避免特殊字符报错）
             const apiUrl = LOCAL_API_BASE + encodeURIComponent(inputText);
            //const apiUrl = LOCAL_API_BASE;
            // 关闭已有SSE连接（避免重复连接）
            if (eventSource) eventSource.close();

            // 建立SSE连接，调用本地接口
            eventSource = new EventSource(apiUrl);

            // 接收接口推送的流数据，触发打字机效果
            eventSource.onmessage = function(event) {
                const responseText = event.data;
                typeText(responseText);
            };

            // 接口错误处理
            eventSource.onerror = function() {
                outputEl.innerHTML = "❌ 连接接口失败，请检查后端是否启动、接口地址是否正确";
                cursorEl.style.display = 'none';
                submitBtn.disabled = false;
                eventSource.close();
            };

            // 接口连接关闭（所有数据推送完成）
            eventSource.onclose = function() {
                cursorEl.style.display = 'none';
                submitBtn.disabled = false;
            };
        });

        // 核心：逐字打印文本（打字机效果）
        function typeText(text) {
            let index = 0;
            const timer = setInterval(() => {
                if (index < text.length) {
                    outputEl.innerHTML += text.charAt(index);
                    index++;
                    // 自动滚动到最新内容
                    outputEl.scrollTop = outputEl.scrollHeight;
                } else {
                    clearInterval(timer);
                    outputEl.innerHTML += "\n"; // 每个片段结束后换行（可删除）
                }
            }, TYPE_SPEED);
        }

        // 页面关闭时关闭SSE连接
        window.onbeforeunload = function() {
            if (eventSource) eventSource.close();
        };
    </script>
</body>
</html>